<template>
  <div class="config_field">
    <el-table ref="multipleTable" :data="list" style="width: 100%">
      <el-table-column prop="display" label="排序" width="55" fixed>
        <template slot-scope="scope">
          <i class="el-icon-sort-down" @click="move(1, scope.$index, scope.row)"></i><i class="el-icon-sort-up" @click="move(-1, scope.$index, scope.row)"></i>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="字段" width="100" fixed>
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.title" size="mini" v-on:keydown.tab="blur_add(scope.$index);select_last()"
            @blur="blur_add(scope.$index);set_name(scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="类型" width="100">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" filterable placeholder="请选择" size="mini" @change="set_option(scope.row)">
            <el-option v-for="(o,i) in list_type" :key="o" :label="o" :value="o"></el-option>
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="drop_down_table" label="下-表" width="80">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.drop_down_table" size="mini" :disabled="!scope.row.type || scope.row.type.indexOf('下') === -1"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="drop_down_field" label="下-字段" width="80">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.drop_down_field" size="mini" :disabled="!scope.row.type || scope.row.type.indexOf('下') === -1"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="drop_down_diy" label="下-自定义" width="90">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.drop_down_diy" size="mini" :disabled="!scope.row.type || scope.row.type !== '下拉'"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="user_group" label="用户组" width="70">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.user_group" size="mini" :disabled="scope.row.type !== 'UID'"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="unique" label="唯一标识" width="80">
        <template slot-scope="scope">
          <el-select v-model="scope.row.unique" size="mini">
            <el-option label="" value=""></el-option>
            <el-option label="非空" value="非空"></el-option>
            <el-option label="去重" value="去重"></el-option>
            <el-option label="自动" value="自动"></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="is_type_show" label="分类展示" width="80">
        <template slot-scope="scope">
          <el-radio :label="1" name="is_type_show" v-model.number="scope.row.is_type_show" @click.native.prevent="typeClick(scope.$index, scope.row)"><span></span></el-radio>
        </template>
      </el-table-column>

      <el-table-column prop="session_read" label="ss读取" width="70">
        <template slot-scope="scope">
          <el-checkbox v-model.number="scope.row.session_read" :true-label="1" :false-label="0"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="can_query" label="查询" width="65">
        <template slot-scope="scope">
          <el-checkbox v-model.number="scope.row.can_query" :true-label="1" :false-label="0"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="is_img_list" label="图列" width="80">
        <template slot-scope="scope">
          <el-checkbox v-model.number="scope.row.is_img_list" :true-label="1" :false-label="0"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="is_show_collect" label="收显" width="65">
        <template slot-scope="scope">
          <el-checkbox v-model.number="scope.row.is_show_collect" :true-label="1" :false-label="0"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="compute" label="计算">
        <template slot-scope="scope">
          <el-input type="text" v-model="scope.row.compute" size="mini"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="tip_start" label="开始" width="80">
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.tip_start" size="mini"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="tip_way" label="提醒" width="80">
        <template slot-scope="scope">
          <el-select v-model="scope.row.tip_way" size="mini">
            <el-option label="" value=""></el-option>
            <el-option label="数内" value="数内"></el-option>
            <el-option label="数外" value="数外"></el-option>
            <el-option label="日内" value="日内"></el-option>
            <el-option label="日外" value="日外"></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="tip_end" label="结束" width="80">
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.tip_end" size="mini"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="count_chart" label="统计" width="80">
        <template slot-scope="scope">
          <el-select v-model="scope.row.count_chart" size="mini">
            <el-option label="" value=""></el-option>
            <el-option label="类" value="类"></el-option>
            <el-option label="值" value="值"></el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column prop="can_sort" label="排序" width="65">
        <template slot-scope="scope">
          <el-checkbox v-model.number="scope.row.can_sort" :true-label="1" :false-label="0"></el-checkbox>
        </template>
      </el-table-column>

      <el-table-column prop="cmd" label="操作" width="80">
        <template slot-scope="scope">
          <el-popconfirm @confirm="del_field(scope.$index, scope.row);" title="是否删除该字段？" confirm-button-type="danger"
            cancel-button-type="dark">
            <el-button slot="reference" type="danger" plain size="mini"><i class="el-icon-delete"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import mixin from "@/mixins/component.js";

  export default {
    mixins: [mixin],
    props: {
      field_defult: {
        type: Object
      }
    },
    data() {
      return {
        url_del: "~/apis/dev/order_field?method=del&",
        field: "field_id",
        list_type: ["文本", "数字", "图片", "编辑", "多文本", "日期", "日长", "时间", "文件", "下拉", "下寻", "下随", "密码", "手机", "电话", "邮箱",
          "网址",
          "账号", "UID", "身份证"
        ]
      }
    },
    methods: {
      /**
       * 选中最后一项输入框
       */
      select_last() {
        $("").focus();
      },
      /**
       * 设置字段名
       * @param {Object} obj
       */
      set_name(obj) {
        if (obj.title) {
          this.$translate(obj.title, function(name) {
            obj.name = name;
          });
        }
      },
      /**
       * 修改配置项
       * @param {Object} obj 对象
       */
      set_option(obj) {
        switch (obj.type) {
          case "UID":
            // obj.user_group = "";
            break;
          case "":
            break;
        }
      },
      /**
       * 移动顺序
       * @param {Number} num 移动数量
       * @param {Number} index 当前数组索引
       * @param {Object} obj 移动的对象
       */
      move(num, index, obj) {
        if (index + num >= this.list.length) {
          return
        } else if (index + num < 0) {
          return
        }
        var obj2 = Object.assign({}, this.list[index + num]);
        this.list[index + num] = Object.assign({}, obj);
        this.$set(this.list, index, obj2);
      },
      /**
       * 事件 - 失去焦点时添加数组成员
       * @param {Number} index 当前索引
       */
      blur_add(index) {
        var list = this.list;
        if (list[list.length - 1].title) {
          list.push(Object.assign({}, this.field_defult));
        }
      },

      /**
       * @description 判断提醒功能与开始时间，结束时间是否为同一个字段
       * @param {Number} i 索引值
       * @param {Object} obj 对象
       * @param {String} field 提醒类型
       */
      iswarn(i, obj, field) {
        // 选中操作
        if (obj.error_tip == "error_tip" + i) {
          obj.error_tip = "";
        }
        if (obj.error_start == "error_start" + i) {
          obj.error_start = "";
        }
        if (obj.error_end == "error_end" + i) {
          obj.error_end = "";
        }
        obj[field] = field + i;
      },
      /**
       * 事件 - 当表格中单选操作时，改变其他选项
       * @param {Number} index
       * @param {Object} obj
       * @param {String} key
       */
      onRadioChange(index, obj, key) {
        // 当点击已经选中的把 activeModel 置空，就是取消选中，并返回
        if (obj.tip === key) {
          obj.tip = ""
          return
        } else {
          obj.tip = key;
        }
        var lt = this.list;
        for (var i = 0; i < lt.length; i++) {
          var o = lt[i];
          if (index !== i && o.tip == key) {
            o.tip = "";
          }
        }
      },
      /**
       * 事件 - 当表格中单选操作时，改变其他选项
       * @param {Number} index
       * @param {Object} obj
       */
      typeClick(index, obj) {
        if (obj.is_type_show) {
          obj.is_type_show = 0
          return
        } else {
          obj.is_type_show = 1;
          var lt = this.list;
          for (var i = 0; i < lt.length; i++) {
            if (i !== index) {
              lt[i].is_type_show = 0;
            }
          }
        }
      },
      /**
       * 删除字段
       * @param {Number} index 当前索引
       * @param {Object} obj 被删除的字段对象
       */
      del_field(index, obj) {
        if (obj.field_id) {
          this.del({
            field_id: obj.field_id
          });
        }
        this.list.splice(index, 1)
      }
    }
  }
</script>

<style>

</style>
